let item = document.querySelector('.item');
let topWrapper = document.querySelector('top-wrapper');
let pointer = document.querySelector('.pointer');
let ulList = document.querySelector('.itemContent');
let awardUl = document.querySelector('.awardUl');
let ol = document.querySelector('ol');
let count = document.querySelector('.count');
let liNum = 6;
var num = 0;
let flag = false;
let strContent = '';
let newStr = '';
let finNum = 0;
let page = 1;
let numPhone = 135;

_ajax(
  'GET',
  'http://student.0melon0.cn/index/wheel/get_prize_list',
  getContent
);
_ajax(
  'GET',
  'http://student.0melon0.cn/index/wheel/get_top_draw_record_list',
  getTopContent
);
_ajax(
  'GET',
  `http://student.0melon0.cn/index/wheel/get_draw_record_list?page=${page}&page_num=30`,
  getRightContent
);

/**
 * 随机获取159开头的手机号码
 */
function isPhoneNum() {
  numPhone = 135;
  let phoneArr = "";
  while(phoneArr.length<8){
    phoneArr += Math.round(Math.random()*9);
  }
  numPhone += phoneArr;
  console.log(numPhone);
}

pointer.addEventListener('click', () => {
  if (!flag) {
    count.innerText--;
    if (count.innerText < 0) {
      alert('没有抽奖机会了哦！');
      count.innerText = '0';
    } else {
      flag = true;
      item.style.transition = `none`;
      item.style.transform = `rotate(0deg)`;
      getComputedStyle(item).transform;

      isPhoneNum();

      _ajax(
        'GET',
        `http://student.0melon0.cn/index/wheel/draw?phone=${numPhone}`,
        getPhone
      );

      /**
       * 获取手机号码，得对应奖品的id
       */
      function getPhone({ data: _t }) {
        console.log(_t);
        _t = _t.bingo_prize_id;
        finNum = _t-1;
        

        //十圈后停到对应的位置
        num = 3600 + (finNum * 60);
        run();
      }
    }
  }
});

/**
 * 圆盘内容
 */
function getContent({ data: _e }) {
  strContent = '';
  _e = _e.prize_list;
  _e.forEach((item, index) => {
    let deg = (360 / liNum) * (index + 1);
    strContent += `<li style="transform: rotate(${deg}deg) skewX(${
      90 - 360 / liNum
    }deg);">
              <img src="${item.diagram}">
              <span>${item.name}</span>
            </li>`;
  });
  ulList.innerHTML = `${strContent}`;
}

/**
 * 顶部内容
 */
function getTopContent({ data: _t }) {
  strContent = '';
  _t.forEach((item) => {
    strContent += `<li><img src="./image/bells.png">
    <span>恭喜${item.phone}用户抽中${item.prize_name}</span>
  </li>`;
  });
  ol.innerHTML += `${strContent}`;
}

/**
 * 右边内容
 */
function getRightContent({ data: _d }) {
  _d = _d.draw_record_list;
  strContent = '';
  _d.forEach((item) => {
    let date = new Date(parseInt(item.draw_time_stamp));

    strContent += `<li class="awardLi">
                      <span>
                      ${date.getFullYear()}.${
      date.getMonth() + 1
    }.${date.getDate()} ${date.getHours()}.${date.getMinutes()}
                      </span>
                      <span>${item.prize_name}</span>
                  </li>`;
  });
  awardUl.innerHTML += `${strContent}`;
}

/**
 * 圆盘运动
 */
function run() {
  if (flag) {
    item.style.transition = `all 3s ease-in-out`;
    item.style.transform = `rotate(-${num}deg)`;
  }
}

item.addEventListener('transitionend', () => {
  flag = false;
  let text = ulList.children[finNum].lastElementChild.innerText;

  strContent = '';
  strContent = `<li><img src="./image/bells.png">
  <span>恭喜${numPhone}用户抽中${text}</span>
</li>`;
  ol.innerHTML = strContent + ol.innerHTML;

  let nowDate = new Date();
  newStr = '';
  newStr = `<li class="awardLi">
  <span>
  ${nowDate.getFullYear()}.${
    nowDate.getMonth() + 1
  }.${nowDate.getDate()} ${nowDate.getHours()}.${nowDate.getMinutes()}
  </span>
  <span>${text}</span>
</li>`;
  awardUl.innerHTML = newStr + awardUl.innerHTML;
});

/**
 * 下拉触底
 */
function addPage() {
  awardUl.addEventListener('scroll', () => {
    if (parseInt(awardUl.scrollTop) >= awardUl.scrollHeight - 500) {
      page++;
      _ajax(
        'GET',
        `http://student.0melon0.cn/index/wheel/get_draw_record_list?page=${page}&page_num=30`,
        getRightContent
      );
    }
  });
}
addPage();
